<template>
	<view class="fover-list">
		<view class="fover-list-li" v-for="(userItem,index) in list">
			<userAvatar radius="50%" :src="userItem.avatar" :size="AvatarSize"></userAvatar>
		</view>
		<view class="fover-list-li fover-list-li-expand" v-if="list.length < 8">
			<wd-icon name="more1" size="25rpx" color="#7c848b"></wd-icon>
		</view>
	</view>
</template>
<script setup>
	import userAvatar from '@/components/user_avatar/user_avatar.vue'
	defineProps(["list","AvatarSize"])
</script>

<style scoped lang="scss">
	.fover-list {
		display: flex;
		margin: 30rpx 0rpx;
		gap: 22rpx;
		align-items: center;
		margin-top: 0rpx;
		padding: 8rpx 35rpx;
	}

	.fover-list-expand,
	.fover-list-li {
		width: 45rpx;
		height: 45rpx;
	}

	.fover-list-expand {
		min-width: 45rpx;
		min-height: 45rpx;
		border-radius: 50%;
		border: 4rpx solid #c3c3c344;
		background: white;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>